Home > Layout > Change the alignment of an element

Change the alignment of an element

Alignment determines how an element resizes. For example, a left aligned element stretches to the right as the parent layout container gets resized.

To change the alignment of an element

1. In a grid panel, click the element for which you want to change alignment to select the element. If Width and Height for that element are set to Auto under Layout in the Properties panel, then the object may appear to collapse when you change HorizontalAlignment or VerticalAlignment properties in the Properties panel.
2. Under Layout in the Properties panel, do one of the following:
   • Change the HorizontalAlignment property by clicking Left , Center , Right , or Stretch .
   • Change the VerticalAlignment property by clicking Top , Center , Bottom , or Stretch .

You can also change alignment by moving an element on the artboard. Notice how the HorizontalAlignment and VerticalAlignment properties change as you move the object to different regions of the grid panel. In Grid layout mode , alignment for an element relative to its parent grid is indicated on the artboard as a solid line when alignment is set and margins are enforced, or as a dashed line when alignment is not set and margins aren't observed.